<template>
    <div id="dic-level-root" class="dic_config_warp">
      <p v-if="isPleased" class="isPleaseTips">{{$t('channelsettings.sato1')}}</p>
      <el-form ref="ruleForm" :model="model" :rules="rules">
       <ul class="next">
           <el-form-item prop="firstHeader">
             <el-input class="level-input" v-model.trim="model.firstHeader" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.dicTip6')"></el-input>
           </el-form-item>
         <div class="li-wapper">
           <li class="item" :class="{active: index === firstIndex}" v-for="(model, index) in firstOption">
             <div class="bold" @click.stop="toggle($event, index, 1, model)">
               <div class="option-wapper">
                 <div class="input-wapper">
                   <el-input class="no-border" v-model.trim="model.name" :placeholder="$t('public.pleaseInput')"></el-input>
                 </div>
                 <div class="other-wapper">
                   <el-checkbox v-model="model.checked" @change="changeState($event, index, 1)"></el-checkbox>
                 </div>
                 <div class="icon-wapper">
                   <i class="el-icon-arrow-right" :class="{arrow_right: index !== 0}"></i>
                   <i v-if="index !== 0" class="el-icon-close" @click.stop="delChild(index, 1)"></i>
                 </div>
               </div>
             </div>
           </li>
           <li class="add" @click="addChild(1)"><el-button class="addItem" type="text">{{$t('configLazyLoad.qualityCheck.addItem')}}</el-button></li>
         </div>
       </ul>
       <ul class="next" v-if="model.cascade >= 2">
           <el-form-item prop="secoundHeader">
              <el-input class="level-input" v-model.trim="model.secoundHeader" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.dicTip7')"></el-input>
           </el-form-item>
         <div class="li-wapper">
           <li class="item" :class="{active: index === secoundIndex}" v-for="(model, index) in secoundOption">
             <div v-if="model.name!=='root'" class="bold" @click.stop="toggle($event, index, 2)">
               <div class="option-wapper">
                 <div class="input-wapper">
                   <el-input class="no-border" v-model.trim="model.name" :placeholder="$t('public.pleaseInput')"></el-input>
                 </div>
                 <div class="other-wapper">
                   <el-checkbox v-model="model.checked" :disabled="model.isdisabled"  @change="changeState($event, index, 2)"></el-checkbox>
                 </div>
                 <div class="icon-wapper" v-if="!isPleased">
                   <i class="el-icon-arrow-right arrow_right"></i>
                   <i class="el-icon-close" @click.stop="delChild(index, 2)"></i>
                 </div>
               </div>
             </div>
           </li>
           <li class="add" @click="addChild(2)" v-if="!isPleased"><el-button class="addItem" type="text">{{$t('configLazyLoad.qualityCheck.addItem')}}</el-button></li>
         </div>
       </ul>
       <ul class="next" v-if="model.cascade >= 3">
           <el-form-item prop="thirdHeader">
              <el-input class="level-input" v-model.trim="model.thirdHeader" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.dicTip8')"></el-input>
           </el-form-item>
         <div class="li-wapper">
           <li class="item" :class="{active: index === thirdIndex}" v-for="(model, index) in thirdOption">
             <div v-if="model.name!=='root'" class="bold" @click.stop="toggle($event, index, 3)">
               <div class="option-wapper">
                 <div class="input-wapper">
                   <el-input class="no-border" v-model.trim="model.name" :placeholder="$t('public.pleaseInput')"></el-input>
                 </div>
                 <div class="other-wapper">
                   <el-checkbox v-model="model.checked" :disabled="model.isdisabled"   @change="changeState($event, index, 3)"></el-checkbox>
                 </div>
                 <div class="icon-wapper">
                   <i class="el-icon-arrow-right arrow_right"></i>
                   <i class="el-icon-close" @click.stop="delChild(index, 3)"></i>
                 </div>
               </div>
             </div>
           </li>
           <li class="add" @click="addChild(3)"><el-button class="addItem" type="text">{{$t('configLazyLoad.qualityCheck.addItem')}}</el-button></li>
         </div>
       </ul>
       <ul class="next" v-if="model.cascade >= 4">
          <el-form-item prop="fourHeader">
            <el-input class="level-input" v-model.trim="model.fourHeader" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.dicTip9')"></el-input>
          </el-form-item>
          <div class="li-wapper">
            <li class="item" :class="{active: index === fourIndex}" v-for="(model, index) in fourOption">
              <div v-if="model.name!=='root'" class="bold" @click.stop="toggle($event, index, 4)">
                <div class="option-wapper">
                  <div class="input-wapper">
                    <el-input class="no-border" v-model.trim="model.name" :placeholder="$t('public.pleaseInput')"></el-input>
                  </div>
                  <div class="other-wapper">
                    <el-checkbox v-model="model.checked" :disabled="model.isdisabled"   @change="changeState($event, index, 4)"></el-checkbox>
                  </div>
                  <div class="icon-wapper">
                    <i class="el-icon-arrow-right arrow_right"></i>
                    <i class="el-icon-close" @click.stop="delChild(index, 4)"></i>
                  </div>
                </div>
              </div>
            </li>
            <li class="add" @click="addChild(4)"><el-button class="addItem" type="text">{{$t('configLazyLoad.qualityCheck.addItem')}}</el-button></li>
          </div>
        </ul>
        <ul class="next" v-if="model.cascade >= 5" style="margin-right:0">
          <el-form-item prop="fiveHeader">
            <el-input class="level-input" v-model.trim="model.fiveHeader" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.dicTip10')"></el-input>
          </el-form-item>
          <div class="li-wapper">
            <li class="item" :class="{active: index === fiveIndex}" v-for="(model, index) in fiveOption">
              <div v-if="model.name!=='root'" class="bold" @click.stop="toggle($event, index, 5)">
                <div class="option-wapper">
                  <div class="input-wapper">
                    <el-input class="no-border" v-model.trim="model.name" :placeholder="$t('public.pleaseInput')"></el-input>
                  </div>
                  <div class="other-wapper">
                    <el-checkbox v-model="model.checked" :disabled="model.isdisabled"  @change="changeState($event, index, 5)"></el-checkbox>
                  </div>
                  <div class="icon-wapper">
                    <i class="el-icon-arrow-right arrow_right"></i>
                    <i class="el-icon-close" @click.stop="delChild(index, 5)"></i>
                  </div>
                </div>
              </div>
            </li>
            <li class="add" @click="addChild(5)"><el-button class="addItem" type="text">{{$t('configLazyLoad.qualityCheck.addItem')}}</el-button></li>
          </div>
        </ul>
        <ul class="next" v-if="model.name === $t('qualityCheck.satisfactionSurveyOptions')" >
          <el-form-item prop="fiveHeader">
            <el-input class="level-input" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.grade2Sat')"></el-input>
          </el-form-item>
          <div class="li-wapper">
            <li class="item" v-if = "firstOption[firstIndex].children" :class="{active: index === currentSatisfactionChildrenIndex}" v-for="(model, index) in firstOption[firstIndex].children">
              <div v-if="model.name!=='root'" class="bold" @click.stop="setCurrentSatisfactionChildren(model, index)">
                <div class="option-wapper">
                  <div class="input-wapper">
                    <el-input class="no-border" v-model.trim="model.displayName" :placeholder="$t('public.pleaseInput')"></el-input>
                  </div>
                  <div class="other-wapper">
                    <!--<el-checkbox v-model="model.checked" :disabled="model.isdisabled"  @change="changeState($event, index, 5)"></el-checkbox>-->
                  </div>
                  <div class="icon-wapper">
                    <i class="el-icon-arrow-right arrow_right"></i>
                    <i class="el-icon-close" @click.stop="delSatisfactionChildren(index)"></i>
                  </div>
                </div>
              </div>
            </li>
            <li class="add" @click="addSatisfactionChildren"><el-button class="addItem" type="text">{{$t('configLazyLoad.qualityCheck.addItem')}}</el-button></li>
          </div>
        </ul>
        <ul class="next" v-if="model.name === $t('qualityCheck.satisfactionSurveyOptions')" >
          <el-form-item prop="fiveHeader">
            <el-input class="level-input" :disabled="isPleased" :placeholder="$t('config.channel.satisfactionVal')"></el-input>
          </el-form-item>
          <div class="li-wapper">
            <li class="item" :class="{active: true}" v-if='this.firstOption[this.firstIndex].children[this.currentSatisfactionChildrenIndex]'>
              <div v-if="model.name!=='root'" class="bold" >
                <div class="option-wapper">
                  <div class="input-wapper">
                    <el-input class="no-border" :value="this.firstOption[this.firstIndex].children[this.currentSatisfactionChildrenIndex].name" :placeholder="$t('public.pleaseInput')" @blur="oninput($event)"></el-input>
                  </div>
                  <div class="other-wapper">
                    <!--<el-checkbox v-model="model.checked" :disabled="model.isdisabled"  @change="changeState($event, index, 5)"></el-checkbox>-->
                  </div>
                  <div class="icon-wapper">
                    <i class="el-icon-arrow-right arrow_right"></i>
                    <i class="el-icon-close" @click.stop="delChild(index, 5)"></i>
                  </div>
                </div>
              </div>
            </li>
            <li class="add" @click="addChild(2)" v-if="!isPleased"><el-button class="addItem" type="text">{{$t('configLazyLoad.qualityCheck.addItem')}}</el-button></li>
          </div>
        </ul>
      </el-form>
      <div class="btn_warp">
        <el-button type="primary" class="primary_btn fr" @click="onSubmit">{{$t('public.save')}}</el-button>
        <el-button class="primary_btn fr cancel" @click="cancel">{{$t('public.cancel')}}</el-button>
      </div>
    </div>
</template>
<script>
  import Vue from 'vue'
  import * as uuid from 'uuid'
  // import { deepClone } from '@/utils/m7Utils'
  export default {
    name: 'dicConfigEditItem',
    props: {
      model: Object
    },
    data () {
      return {
        rules: {
          firstHeader: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          secoundHeader: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          thirdHeader: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          fourHeader: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          fiveHeader: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ]
        },
        firstOption: [],
        secoundOption: [],
        thirdOption: [],
        fourOption: [],
        fiveOption: [],
        currentSatisfactionObj: {},
        twoSatisfactionChildren: [],
        currentSatisfactionChildren: {},
        currentSatisfactionChildrenIndex: 0,
        firstIndex: 0,
        secoundIndex: 0,
        thirdIndex: 0,
        fourIndex: 0,
        fiveIndex: 0,
        cascade: 0, // 当前的层级
        isPleased: false, // 满意度调查
        noRepeat: true, // 是否有重复项
        dicName: ['first', 'secound', 'third', 'four', 'five']
      }
    },
    computed: {},
    watch: {
      model () {
        this.fetchData()
      }
    },
    methods: {
      onSubmit () {
        let dicArr = []
        let id = this.model._id
        let errorCount = 0  // 未填写的个数
        this.noRepeat = true
        this.model.options = filterOptions(this.model.options, dicArr, this)
        console.log(dicArr)
        dicArr.forEach((item) => {
          if (!item) {
            errorCount++
            return
          }
        })
        if (!errorCount) {
          this.$store.dispatch('getCache', {type: 'options', id: id}).then(res => {
            if (res && res.name === this.$t('qualityCheck.satisfactionSurveyOptions')) {
              let NumRegex = new RegExp('^[0-9]{1}$')
              for (var len = dicArr.length, i = len / 2; i < len; i++) {
                for (var j = i + 1; j < len; j++) {
                  if (dicArr[i] === dicArr[j]) {
                    console.log(dicArr)
                    this.$message.error(this.$t('configLazyLoad.dicConfig.dicError5'))
                    return
                  }
                  if (!NumRegex.test(dicArr[i]) || !NumRegex.test(dicArr[j])) {
                    this.$message.error(this.$t('config.channel.satisfactionValRange'))
                    return
                  }
                }
              }
              let flag = deleteOptionParm(this.model.options, 1)
              if (flag) {
                this.$store.dispatch('dicUpdateOneAppDic', this.model).then(res => {
                  if (res.success) {
                    this.$message.success(this.$t('configLazyLoad.qualityCheck.saveSuccess'))
                    this.$emit('refresh')
                  }
                })
              } else {
                this.$message.error(this.$t('configLazyLoad.dicConfig.dicError8'))
              }
            } else {
              this.$refs.ruleForm.validate((valid) => {
                if (valid && this.noRepeat) {
                  this.model.headers[0] = this.model.firstHeader || ''
                  if (this.model.secoundHeader) {
                    this.model.headers[1] = this.model.secoundHeader || ''
                  }
                  if (this.model.thirdHeader) {
                    this.model.headers[2] = this.model.thirdHeader || ''
                  }
                  if (this.model.fourHeader) {
                    this.model.headers[3] = this.model.fourHeader || ''
                  }
                  if (this.model.fiveHeader) {
                    this.model.headers[4] = this.model.fiveHeader || ''
                  }
                  let flag = deleteOptionParm(this.model.options, 1)
                  if (flag) {
                    delete this.model.firstHeader
                    delete this.model.secoundHeader
                    delete this.model.thirdHeader
                    this.model.cascade = this.model.cascade.toString()
                    this.$store.dispatch('dicUpdateOneAppDic', this.model).then(res => {
                      if (res.success) {
                        this.$message.success(this.$t('configLazyLoad.qualityCheck.saveSuccess'))
                        this.$emit('refresh')
                      }
                    })
                  } else {
                    this.$message.error(this.$t('configLazyLoad.dicConfig.dicError8'))
                  }
                } else {
                  return false
                }
              })
            }
          })
        } else {
          this.$message.error(this.$t('configLazyLoad.dicConfig.dicError2', {errorCount: errorCount}))
        }
      },
      cancel () {
        this.$emit('cancel')
      },
      toggle (event, index, level, model) {
        // 处理二级满意度调查相关逻辑
        if (level === 1 && this.model.name === this.$t('qualityCheck.satisfactionSurveyOptions')) {
          this.handleTwoSatisfaction(model, index)
        }
        // if (level === 1) {
        //   this.firstIndex = index
        //   this.secoundIndex = 0
        //   this.thirdIndex = 0
        // } else if (level === 2) {
        //   this.secoundIndex = index
        //   this.thirdIndex = 0
        // } else if (level === 3) {
        //   this.thirdIndex = index
        // }
        this[this.dicName[level - 1] + 'Index'] = index
        this.dicName.forEach((item, num) => {
          if (num > level - 1) {
            this[item + 'Index'] = 0
          }
        })
        this.changeOption()
      },
      showChecked (status) {
        return status === '2'
      },
      delChild (index, level) {
        if (level === 1) {
          this.firstOption.splice(index, 1)
          this.firstIndex = 0
        } else if (level === 2 && this.firstOption.length) {
          this.secoundOption.splice(index, 1)
          this.secoundIndex = 0
        } else if (level === 3 && this.secoundOption.length) {
          this.thirdOption.splice(index, 1)
          this.thirdIndex = 0
        } else if (level === 4 && this.thirdOption.length) {
          this.fourOption.splice(index, 1)
          this.fourIndex = 0
        } else if (level === 5 && this.fourOption.length) {
          this.fiveOption.splice(index, 1)
          this.fiveIndex = 0
        }
        this.changeOption()
      },
      addChild (level) { // 添加字典项
        let temp = {
          name: '',
          key: uuid.v1(),
          state: '2',
          options: [],
          checked: true
        }
        let cascade = parseInt(this.model.cascade) - 1
        if (level === 1) {
          if (this.isPleased && this.firstOption.length >= 10) {
            this.$message.error(this.$t('configLazyLoad.dicConfig.dicError12'))
            return
          } else {
            this.firstOption.push(temp)
            pushOption(this.firstOption[this.firstOption.length - 1].options, cascade, false)
          }
        } else if (level === 2 && this.firstOption.length) {
          let isdisabled = !this.firstOption[this.firstIndex].checked
          temp.isdisabled = isdisabled
          this.secoundOption.push(temp)
          cascade = cascade - 1
          pushOption(this.secoundOption[this.secoundOption.length - 1].options, cascade, isdisabled)
        } else if (level === 3 && this.secoundOption.length) {
          let isdisabled = !(this.secoundOption[this.secoundIndex].checked && this.firstOption[this.firstIndex].checked)
          temp.isdisabled = isdisabled
          this.thirdOption.push(temp)
          cascade = cascade - 2
          pushOption(this.thirdOption[this.thirdOption.length - 1].options, cascade, isdisabled)
        } else if (level === 4 && this.thirdOption.length) {
          let isdisabled = !(this.thirdOption[this.thirdIndex].checked && this.secoundOption[this.secoundIndex].checked && this.firstOption[this.firstIndex].checked)
          temp.isdisabled = isdisabled
          this.fourOption.push(temp)
          cascade = cascade - 3
          pushOption(this.fourOption[this.fourOption.length - 1].options, cascade, isdisabled)
        } else if (level === 5 && this.fourOption.length) {
          let isdisabled = !(this.fourOption[this.fourIndex].checked && this.thirdOption[this.thirdIndex].checked && this.secoundOption[this.secoundIndex].checked && this.firstOption[this.firstIndex].checked)
          temp.isdisabled = isdisabled
          this.fiveOption.push(temp)
        }
        this.changeOption()
      },
      changeState (checked, index, level) { // 点击启用或禁用option
        let status = checked ? '2' : '1'
        if (level === 1) {
          Vue.set(this.firstOption[index], 'state', status)
          Vue.set(this.firstOption[index], 'checked', checked)
          forbiddenOption(this.firstOption[index].options, checked)
        } else if (level === 2 && this.firstOption.length) {
          Vue.set(this.secoundOption[index], 'state', status)
          Vue.set(this.secoundOption[index], 'checked', checked)
          forbiddenOption(this.secoundOption[index].options, checked)
        } else if (level === 3 && this.secoundOption.length) {
          Vue.set(this.thirdOption[index], 'state', status)
          Vue.set(this.thirdOption[index], 'checked', checked)
          forbiddenOption(this.thirdOption[index].options, checked)
        } else if (level === 4 && this.thirdOption.length) {
          Vue.set(this.fourOption[index], 'state', status)
          Vue.set(this.fourOption[index], 'checked', checked)
          forbiddenOption(this.fourOption[index].options, checked)
        } else if (level === 5 && this.fourOption.length) {
          Vue.set(this.fiveOption[index], 'state', status)
          Vue.set(this.fiveOption[index], 'checked', checked)
          forbiddenOption(this.fiveOption[index].options, checked)
        }
        this.changeOption()
      },
      changeOptionItem (n, options) {
        let num = this.dicName[n - 1]
        this[num + 'Option'] = options || []
        let current = options[this[num + 'Index']]
        let nextOptions = []
        if (current) {
          nextOptions = current.options || []
        }
        if (n < this.cascade) {
          n++
          this.changeOptionItem(n, nextOptions)
        }
      },
      changeOption () {
        this.firstOption = []
        this.secoundOption = []
        this.thirdOption = []
        this.fourOption = []
        this.fiveOption = []
        if (this.model.options) {
          this.changeOptionItem(1, this.model.options)
        }
        // if (this.model.options) {
        //   this.firstOption = this.model.options
        //   let firstOption = this.model.options[this.firstIndex] || []
        //   if (firstOption && this.cascade > 1) {
        //     this.secoundOption = firstOption.options || []
        //     let secoundOption = firstOption.options[this.secoundIndex]
        //     if (secoundOption && this.cascade > 2) {
        //       if (secoundOption.options) {
        //         this.thirdOption = secoundOption.options
        //       } else {
        //         secoundOption.options = []
        //         this.thirdOption = secoundOption.options
        //       }
        //     } else {
        //       this.thirdOption = []
        //     }
        //   } else {
        //     this.secoundOption = []
        //     this.thirdOption = []
        //   }
        // }
      },
      fetchData () {
        this.isPleased = this.model.name === this.$t('qualityCheck.satisfactionSurveyOptions') // 是否是满意度调查
        this.firstIndex = 0
        this.secoundIndex = 0
        this.thirdIndex = 0
        this.model.cascade = Number(this.model.cascade)
        if (!this.model.headers) {
          Vue.set(this.model, 'headers', [])
        }
        Vue.set(this.model, 'firstHeader', this.model.headers[0])
        Vue.set(this.model, 'secoundHeader', this.model.headers[1])
        Vue.set(this.model, 'thirdHeader', this.model.headers[2])
        Vue.set(this.model, 'fourHeader', this.model.headers[3])
        Vue.set(this.model, 'fiveHeader', this.model.headers[4])
        let cascade = parseInt(this.model.cascade)
        this.cascade = cascade
        if (typeof this.model.options === 'undefined') {
          Vue.set(this.model, 'options', [])
          pushOption(this.model.options, cascade, false)
          this.secoundOption = []
          this.thirdOption = []
          this.fourOption = []
          this.fiveOption = []
        }
        Vue.set(this.model, 'options', filterState(this.model.options, cascade - 1))
        this.model.options.forEach((item) => {
          if (!item.options) {
            Vue.set(item, 'options', [])
          }
          let addOptionToArr = true // 处理字典层级切换后 没有option这个字段的问题
          forbiddenOption(item.options, item.checked, addOptionToArr)
        })
        this.changeOption()
//        this.model.options = filterState(this.model.options)
      },
      handleTwoSatisfaction (model, index) {
        this.currentSatisfactionChildrenIndex = 0
        if (!model.children) {
          model.children = [{'name': '', 'key': uuid.v1(), 'state': '', 'displayName': ''}]
        }
      },
      delSatisfactionChildren (index) {
        console.log(index)
        this.firstOption[this.firstIndex].children.splice(index, 1)
      },
      addSatisfactionChildren () {
        if (this.firstOption[this.firstIndex].children.length <= 9) {
          this.firstOption[this.firstIndex].children.push({'name': '', 'key': uuid.v1(), 'state': '', 'displayName': ''})
        } else {
          this.$message.error(this.$t('configLazyLoad.dicConfig.dicError10'))
        }
      },
      setCurrentSatisfactionChildren (model, index) {
        this.currentSatisfactionChildrenIndex = index
      },
      oninput (val) {
        let NumRegex = new RegExp('^[0-9]{1}$')
        let newVal = val.target.value
        if (!NumRegex.test(newVal)) {
          this.$message.error(this.$t('config.channel.satisfactionValRange'))
          return
        } else {
          this.firstOption[this.firstIndex].children[this.currentSatisfactionChildrenIndex].name = newVal
        }
      }
    },
    updated () {
    },
    beforeMount () {
      this.fetchData()
    }
  }

  function forbiddenOption (modelOptions, status, addOptionToArr) { //  禁用option的下级
    if (modelOptions) {
      modelOptions.forEach((item) => {
        if (!status) {
          Vue.set(item, 'isdisabled', true)
        } else {
          Vue.set(item, 'isdisabled', false)
        }
        let newStatus = status && item.checked
        if (!item.options && addOptionToArr) {
          Vue.$set(item, 'options', [])
        }
        forbiddenOption(item.options, newStatus, addOptionToArr)
      })
    }
  }

  function pushOption (modelOptions, cascade, isdisabled) { //  循环插入新的字典项
    if (cascade) {
      let temp = {
        name: '',
        key: uuid.v1(),
        state: '2',
        options: [],
        isdisabled: isdisabled,
        checked: true
      }
      modelOptions.push(temp)
      pushOption(modelOptions[0].options, cascade - 1, isdisabled)
    }
  }

  function filterState (arrOption, cascade) { //  处理字典项的选中状态
    if (arrOption && arrOption.length) {
      arrOption.forEach((item) => {
        if (item.state === '2') {
          Vue.set(item, 'checked', true)
        } else {
          Vue.set(item, 'checked', false)
        }
        if (item.options && item.options.length) {
          filterState(item.options, cascade - 1)
        } else if ((typeof item.options === 'undefined' || !item.options.length) && cascade) {
//          Vue.set(item, 'options', [])
//          let temp = {
//            name: '',
//            key: uuid.v1(),
//            state: '2',
//            options: [],
//            isdisabled: false,
//            checked: true
//          }
//          item.options.push(temp)
        }
      })
    }
    return arrOption
  }

  function deleteOptionParm (arrOption, count) { //  删除不需要上传的参数/ 检查第一级是否有未选中项
    let flag = true
    if (arrOption && arrOption.length) {
      if (count === 1) {
        let arr = []
        arrOption.forEach((item) => {
          arr.push(item.checked)
        })
        flag = arr.filter((item) => item === true)[0]
      }
      if (flag) {
        arrOption.forEach((item) => {
          delete item.checked
          delete item.isdisabled
          if (item.options && item.options.length) {
            count++
            deleteOptionParm(item.options, count)
          }
        })
      }
    }
    return flag
  }

  function filterOptions (arrOption, dicArr, self) { //  查看字典项是否为空
    if (arrOption && arrOption.length) {
      let newArr = []
      arrOption.forEach((item) => {
        newArr.push(item.name)
        dicArr.push(item.name)
      })
      unArray(newArr, self)
      console.log(newArr, 'newArr')
      arrOption.forEach((item) => {
        if (item.options && item.options.length) {
          filterOptions(item.options, dicArr, self)
        }
      })
    }
    return arrOption
  }

  function unArray (Arr, self) { // 数组去重
    let newArr = []
    for (let i = 0; i < Arr.length; i++) {
      if (Arr[i]) {
        if (newArr.indexOf(Arr[i]) === -1) { // 检测newArr数组里是否包含Arr数组的内容，==-1检索的字符串没有出现则为-1
          newArr.push(Arr[i]) // 把Arr数组的第i项插入新数组
        } else {
          self.noRepeat = false
          self.$message.error(self.$t('configLazyLoad.dicConfig.dicError13', {item: Arr[i]}))
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .dic_config_warp
    padding 0px 20px 20px
    .el-form
      overflow hidden
    .cancel
      margin-right 20px
    .btn_warp
      height 30px
      margin 20px 0
    .isPleaseTips
      color $c-prompt
      height 30px
      line-height 30px
  .item
    cursor pointer
  .bold
    font-weight bold
  .next
    padding-left 0em
    line-height 1.5em
    list-style dot
    float left
    margin-right 14px
    width 154px
    .li-wapper
      margin-top 20px
      .item
        border-left 1px solid #999
        border-right 1px solid #999
        &:first-child
          border-top 1px solid #999
  .next
    &:first-child
      display block
  #dic-level-root li > ul
    display none
  #dic-level-root>li.item>ul
    left 0
    display block
  #dic-level-root li.active >ul,
  #dic-level-root li ul li
    display block
  #dic-level-root li > .bold > .option-wapper
    .icon-wapper
      .el-icon-arrow-right
        color #808080
      .el-icon-close
        display none
      .arrow_right
        display inline
  #dic-level-root li.active > .bold > .option-wapper
    .icon-wapper
      .el-icon-close
        display inline
      .arrow_right
        display none
  .option-wapper
    display flex
    align-items center
    padding-right 5px
    .other-wapper
      margin-right 12px
  .add
    border 1px solid $c-main
    background #f5fffe
    padding-left: 10px
  .active
    background $c-main
  .non-fatal-wapper
    color $cf-level3
    margin-top 16px
  .non-fatal
    width 56px
  .addItem
    background #f5fffe
  #dic-level-root li.active > .bold > .option-wapper
    background $c-main
    .icon-wapper
      .el-icon-arrow-right
        color #fff
      .el-icon-close
        color #fff
        display inline
      .arrow_right
        display none
  #dic-level-root li:hover > .bold > .option-wapper
    background $c-main
    .icon-wapper
      .el-icon-arrow-right
        color #fff
      .el-icon-close
        color #fff
        display inline
      .arrow_right
        display none
</style>
